import React from 'react'
import { NavLink } from 'react-router-dom'
import logo from '../images/logo.png'
import './Header.css'
import { message } from 'antd';


const Header = () => {

  const Onban = () => {
    message.error("请您先登入")
  }

  return (
    <div className='header'>
      <img src={logo} id='logo' style={{ paddingLeft: "20px", width: "63px" }} />
      <span style={{ fontWeight: 'bold', color: "#BD3124" }}>格物衍艺</span>
      <NavLink to='/' activeClassName='click-active'><span style={{ marginLeft: "20px" }}> 首页 </span></NavLink>
      <NavLink to='/' onClick={Onban}><span> 工作台 </span></NavLink>
      <NavLink to='/' onClick={Onban}><span> 创作资源 </span></NavLink>
      <NavLink to='/' onClick={Onban}><span> 产品展示 </span></NavLink>
      <NavLink to='/' onClick={Onban}><span> 帮助中心 </span></NavLink>
      <NavLink to='/registered'><button>注册</button></NavLink>
      <NavLink to='/login'><button>登入</button></NavLink>
    </div>
  )
}
export default Header

